<template>
	<view class="bank_transfer_warp">
		<view class="_header_warp">
			<up-image src="/static/comm/left.png" width="16" height="16" bgColor="#f1f6ff00" shape="circle" @click="jumpCard"></up-image>
			<view class="_header_type_warp">
				<view :class="type === 1 ? '_header_type_item_warp _header_type_item_sel_warp':'_header_type_item_warp'" @click="checkType(1)">{{$t('mine.bank.transfer.type1')}}</view>
				<view :class="type === 2 ? '_header_type_item_warp _header_type_item_sel_warp':'_header_type_item_warp'" @click="checkType(2)">{{$t("mine.bank.transfer.type2")}}</view>
			</view>
		</view>
		<view class="recharge_content_warp">
			<view class="_content_common">
				<view class="_content_title_common">{{$t('mine.bank.transfer.account')}}</view>
				<CardComm @getSelectCard="getSelectCard"/>
			</view>
			<view class="_content_common" v-if="type === 1">
				<view class="_content_title_common">{{$t('mine.bank.transfer.receive')}}</view>
				<CardComm @getSelectCard="getSelectReceiveCard"/>
			</view>
			<view v-else>
				<view class="_content_title_common">{{$t('mine.bank.transfer.receive.info')}}</view>
				<up-input
					:placeholder="$t('mine.bank.transfer.receive.ownerLastName')"
					border="surround"
					v-model="form.ownerLastName"
					:customStyle="inputCss"
				></up-input>
				<view class="_content_fg"></view>
				<up-input
					:placeholder="$t('mine.bank.transfer.receive.ownerFirstName')"
					border="surround"
					v-model="form.ownerFirstName"
					:customStyle="inputCss"
				></up-input>
				<view class="_content_fg"></view>
				<up-input
					:placeholder="$t('mine.bank.transfer.receive.brankNumber')"
					border="surround"
					v-model="form.toCardNum"
					:customStyle="inputCss"
				></up-input>
			</view>
			<view class="_content_common">
				<view class="_content_title_common">{{$t('mine.balance.transfer.amount')}}</view>
				<up-input
					:placeholder="$t('mine.balance.transfer.amount.placeholder')"
					border="surround"
					v-model="form.amount"
					:customStyle="inputCss"
					type="number"
					@change="checkAmount"
				>
					<template #suffix>
						USDT
					</template>
				  </up-input>
			</view>
			<view class="_content_common">
				<view class="reality_warp">
					<view class="reality_title_warp">{{$t("recharge.credited.account")}}</view>
					<view>
						<text class="reality_amount_warp">{{receivedAmount}}</text>
						<text class="reality_msg_warp">USDT</text>
					</view>
				</view>
				<view class="fee_warp">
					<text>{{$t("common.fee")}}：</text>
					<text class="fee_amount_warp">{{feeData}} %</text>
				</view>
			</view>
			<view class="_content_common">
				<view class="_content_title_common">{{$t("common.remarks")}}</view>
				<up-input
					:placeholder="$t('common.remarks.placeholder')"
					border="surround"
					v-model="form.remark"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="_content_common">
				<view class="_content_title_common2">{{$t("common.warm.reminder")}}</view>
				<view class="_remark_warp">
					<view>{{$t('recharge.reminder')}}</view>
				</view>
			</view>
			<view class="but_comm_warp" @click="jumpPay">
				{{$t("mine.balance.transfer.ok")}}
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import CardComm from '@/components/card_comm.vue';
	import { cardTransferOut,cardTransferSelf,getTransferFeeRate} from '@/api/finance.js';
	import { TRABSFER_TYPE } from '@/utils/enumUtils.js';
	
	export default {
		components:{CardComm},
		data() {
			return {
				type:1,// 1:内部卡互转 2：给其他人卡转账
				form:{
					fromCardId:'',// 转账的账号
					toCardId:'',// 接收转账的账号
					toCardNum:'',// 转账的账号
					ownerLastName:'',// 持卡人姓名
					ownerFirstName:'',// 持卡人姓氏
					amount:'',// 转账的金额
					remark:'',// 备注
				},
				receivedAmount:0,// 实际到账金额
				feeData:0,// 手续费
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
			};
		},
		mounted() {
			this.getTransferFeeRateFun();
		},
		methods: {
			getSelectCard(item){
				this.form.fromCardId = item.id
			},
			getSelectReceiveCard(item){
				this.form.toCardId = item.id
			},
			jumpCard(){
				uni.switchTab({
					url:"/pages/card/card",
				})
			},
			checkType(type){
				this.type = type;
			},
			/**
			 * 自定义金额
			 * @param {Object} value
			 */
			checkAmount(value){
				const feeData = this.feeData / 100;
				let amount = value;
				if(feeData){
					amount = (amount - amount * feeData).toFixed(2);
				}
				this.receivedAmount = amount;
			},
			/**
			 * 查询手续费
			 */
			async getTransferFeeRateFun(){
				const type = this.type;
				const params = {
					type:type === 1 ? TRABSFER_TYPE.INTERNAL : TRABSFER_TYPE.EXTERNAL
				}
				const resp = await getTransferFeeRate(params);
				if(resp && resp.bizcode === 100){
					let feeData = 0;
					if(resp.data){
						feeData = resp.data * 100
					}
					this.feeData = feeData;
				}
			},
			async jumpPay(){
				const type = this.type;
				const form = this.form;
				const params={};
				if(!form.fromCardId){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.bank.transfer.account.placeholder'),
					});
					return false;
				}
				params.fromCardId = form.fromCardId;
				// 内部
				if(type === 1){
					if(!form.toCardId){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.bank.transfer.receive.placeholder'),
						});
						return false;
					}
					params.toCardId = form.toCardId;
				}
				// 外部
				if(type === 2){
					if(!form.ownerLastName){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.bank.transfer.receive.brankName'),
						});
						return false;
					}
					params.ownerLastName = form.ownerLastName;
					if(!form.ownerFirstName){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.bank.transfer.receive.ownerLastName'),
						});
						return false;
					}
					params.ownerFirstName = form.ownerFirstName;
					if(!form.toCardNum){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('mine.bank.transfer.receive.brankNumber'),
						});
						return false;
					}
					params.toCardNum = form.toCardNum;
				}
				if(!form.amount){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t("mine.balance.transfer.amount.placeholder"),
					});
					return false;
				}
				params.amount = form.amount;
				params.remark = form.remark;
				let resp={};
				if(type === 1){
					resp = await cardTransferSelf(params);
				}else if(type === 2){
					resp = await cardTransferOut(params);
				}
				if(resp && resp.bizcode === 100){
					console.log("resp",resp);
					this.$refs.uToastRef.show({
						type: 'success',
						message: this.$t("recharge.ok"),
					});
					setTimeout(()=>{
						this.jumpCard();
					},1500)
				}
			},
		}
	}
</script>

<style lang="scss">
	.bank_transfer_warp{
		padding: 100rpx 30rpx 30rpx;
		._header_warp{
			display: flex;
			justify-content: space-between;
			align-items: center;
			._header_type_warp{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: calc(100% - 52rpx);
				background: #F5F5F5;
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #666666;
				margin-left: 20rpx;
			}
			._header_type_item_warp{
				width: 50%;
				text-align: center;
				padding: 20rpx 0;
			}
			._header_type_item_sel_warp{
				background: #3D3D3D;
				color: #FFFFFF;
				border-radius: 44rpx;
			}
		}
		
		.but_comm_warp{
			margin-top: 100rpx;
		}
		._content_fg{
			height: 20rpx;
		}
	}
</style>
